<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{:session('cp.cpsysname')}--商户管理平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="{:config('webconfig.description');}">
    <meta name="keywords" content="{:config('webconfig.keywords');}">
    <meta name="author" content="runoob">
    <link rel="stylesheet" href="__STATIC_URL__/static/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/index.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/css/bootstrapSwitch.css">
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/bootstrap-datetimepicker.css"/>
    <link rel="stylesheet" href="__STATIC_URL__/static/css/setcard.css"/>
    <script src="__STATIC_URL__/static/js/jquery-2.1.4.min.js"></script>
    <script src="__STATIC_URL__/static/js/bootstrap-datetimepicker.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC_URL__/static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="__STATIC_URL__/static/js/bootstrapSwitch.js"></script>
    <style>
        .card-left .activityTitle {
            position: absolute;
            top: 29px;
            color: #fff;
            font-size: 14px;
            width: 162px;
            white-space: nowrap;
            left: 130px;
            display: inline-block;
            overflow: hidden;
        }
        .card-left .commodityImgBox {
            width: 318px;
            height: 203px;
        }
        .card-left .commodityImg,.img {
            width: 318px;
            height: 203px;
            display: inline-block;
            background-size: 100%;
        }
        .card-left .commodityIntroBox {
            line-height: 20px;
            min-height: 20px;
            text-align: center;
            padding-left: 20px;
            padding-right: 20px;
        }
        .c-aligh-left {
            text-align: left;
        }

        .c-inlineblock {
            display: inline-block;
        }

        .color1 {
            color: #999;
        }
        .card-left .commodityUnivalenceBox {
            overflow: hidden;
            text-align: center;
            height: 20px;
            line-height: 20px;
        }

        .color6 {
            color: #000;
        }

        .mtop5 {
            margin-top: 5px;
        }
        .fsize10 {
            font-size: 10px;
        }
        .card-left .commodityUnivalenceBox .commodityUnivalence {
            font-size: 18px;
            font-weight: bold;
            white-space: nowrap;
        }
        .pad20 {
            padding: 20px;
        }
        .c-line {
            height: 0px;
            border-top: 1px solid #E7E7EB;
        }
        .card-left .commodityDescBox {
            background-color: #F5F5F5;
            min-height: 112px;
            border-radius: 6px;
            margin: 0 20px;
            padding: 5px;
            overflow: hidden;
        }

        .c-aligh-left {
            text-align: left;
        }
        .card-left .paycommodityUnivalenceBox {
            border-radius: 6px;
            background-color: #37B835;
            height: 42px;
            line-height: 42px;
            text-align: center;
            margin-left: 5px;
            margin-right: 5px;
            margin-bottom: 20px;
        }

        .mtop45 {
            margin-top: 45px;
        }
        .color7 {
            color: #fff;
        }

        .fsize14 {
            font-size: 14px;
        }
        .card-left {

            background-color: #ffffff;

        }
        #commodityIntro,.commodityIntro{
            padding-left: 10px;
            width: 328px;
            height: 88px;
            border: 1px solid #DCDDDD;
            vertical-align: text-top;
            resize: none;
        }
        .gift-record select, .gift-record input {
            display: inline-block;
            width: 40%;
            float: left;
        }
        .gift-record input {
            margin-left: 5px;
        }
        .addcord {
            padding: 0;
            margin-top: 5px;
        }

    </style>
    <style>
        .cardR-right {
            padding: 0 20px 5px;
            background-color: #f4f5f9;
            border: 1px solid #e7e7eb;
            border-radius: 0;
            -moz-border-radius: 0;
            -webkit-border-radius: 0;
            box-shadow: none;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
        }
        .cardR-right {
            min-height: 625px;
            padding-bottom: 20px;
        }
        .menu-form-hd {
            padding: 9px 0;
            border-bottom: 1px solid #e7e7eb;
        }
        .color-default {
            color: #428bca!important;
        }
        .we7-padding-top {
            padding-top: 30px!important;
        }
        .color-gray {
            color: #98999a!important;
        }
        .we7-padding-top {
            padding-top: 30px!important;
        }
        .we7-form .form-group, form .form-group {
            margin-bottom: 30px;
        }
        .we7-form .control-label, form .control-label {
            padding-top: 7px;
            padding-left: 0;
            padding-right: 0;
            text-align: left;
            color: #252424;
            font-weight: 400;
        }
        .we7-form .form-controls, form .form-controls {
            padding-left: 0;
            padding-right: 0;
        }
        .input-group {
            border-radius: 0;
        }
        .input-group {
            position: relative;
            display: table;
            border-collapse: separate;
        }
        .input-group .form-control {
            border-color: #e7e7eb;
            border-radius: 0;
            text-shadow: 0 0 0;
            color: #98999a!important;
            -webkit-box-shadow: 0 0 0;
            box-shadow: 0 0 0;
        }
        .we7-form .help-block, form .help-block {
            color: #98999a;
            padding-top: 10px;
            margin-top: 0;
            margin-bottom: 0;
        }
        .help-block {
            display: block;
            margin-top: 5px;
            margin-bottom: 10px;
            color: #737373;
        }
        .menu-content {
            background-color: #fff;
            padding: 16px 20px;
            border: 1px solid #e7e7eb;
        }
        .mobile_bd .pre-menu-list {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            border-top: 1px solid #e7e7eb;
            background: transparent url(/assets/merchant/image/bg-mobile-foot.png) no-repeat 0 0;
            background-position: 0 0;
            background-repeat: no-repeat;
            padding-left: 43px;
            margin-bottom: 0;
        }
        .mobile_bd .pre-menu-list>li:first-child:nth-last-child(3), .mobile_bd .pre-menu-list>li:first-child:nth-last-child(3)~li {
            width: 33.3333%;
        }

        .pre-menu-item:first-child:nth-last-child(3), .pre-menu-item:first-child:nth-last-child(3)~li {
            width: 33.3333%;
        }
        .mobile_bd .pre-menu-item {
            line-height: 50px;
        }
        .pre-menu-item {
            position: relative;
            float: left;
            line-height: 38px;
            text-align: center;
        }
        .mobile_bd .pre-menu-item.active .pre-menu-link, .mobile_bd .head .navbar-left>li.pre-menu-item:hover .pre-menu-link, .head .mobile_bd .navbar-left>li.pre-menu-item:hover .pre-menu-link, .mobile_bd .panel-menu .pre-menu-item.list-group-item:not(.list-group-more):hover .pre-menu-link, .panel-menu .mobile_bd .pre-menu-item.list-group-item:not(.list-group-more):hover .pre-menu-link {
            border: 1px solid #079200;
            line-height: 48px;
            background-color: #fff;
            color: #079200;
        }
        .sub-js-sortable.active .sub-pre-menu-inner{
            border: 1px solid #079200;
            line-height: 48px;
            background-color: #fff;
            color: #079200;
        }
        /*.mobile_bd .pre-menu-item:first-child .pre-menu-link {*/
        /*border-left-width: 0;*/
        /*}*/
        .pre-menu-item a {
            display: block;
            width: auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            color: #616161;
            text-decoration: none;
            font-size:14px;
        }
        .mobile_bd .sub-pre-menu-box {
            bottom: 60px;
            background-color: #fafafa;
            border-top-width: 0;
        }
        .sub-pre-menu-box {
            position: absolute;
            bottom: 50px;
            left: 0;
            width: 100%;
            border: 1px solid #d0d0d0;
            background-color: #fff;
        }
        .mobile_bd .sub-pre-menu-list li:first-child {
            border-top: 1px solid #d0d0d0;
        }
        .mobile_bd .pre-menu-list>li:first-child:nth-last-child(1) {
            width: 100%;
        }
        .mobile_bd .pre-menu-list>li:first-child:nth-last-child(2), .mobile_bd .pre-menu-list>li:first-child:nth-last-child(2)~li {
            width: 50%;
        }
        .mobile_bd .pre-menu-list>li:first-child:nth-last-child(1) .pre-menu-link {
            border: 1px solid #079200;
            color: #079200;
        }
        .mobile_bd .pre-menu-list>li:first-child:nth-last-child(1) .icon14-menu-add {
            background: url(/assets/merchant/image/index-z2a7519.png) 0 -24px no-repeat;
        }

        .mobile_bd .sub-pre-menu-list li {
            line-height: 44px;
            border: 1px solid transparent;
            margin: 0 -1px -1px;
        }
        .mobile_bd .icon14-menu-add {
            background: url(/assets/merchant/image/index-z2a7519.png) 0 0 no-repeat;
            width: 14px;
            height: 14px;
            vertical-align: middle;
            display: inline-block;
            margin-top: -2px;
        }
        .pre-menu-item .icon-menu-dot {
            background: url(/assets/merchant/image/index-z2a7519.png) 0 -48px no-repeat;
            width: 7px;
            height: 7px;
            vertical-align: middle;
            display: inline-block;
            margin-right: 2px;
            margin-top: -2px;
        }
        .pre-menu-link {
            border-left: 1px solid #e7e7eb;
        }
        .menu-preview-area .icon14-menu-add {
            background: url(/assets/merchant/image/index-z2a7519.png) 0 0 no-repeat;
            width: 14px;
            height: 14px;
            vertical-align: middle;
            display: inline-block;
            margin-top: -2px;
        }
        .sub-pre-menu-list li:first-child {
            border-top: 1px solid #d0d0d0;
        }

        .sub-pre-menu-list li {
            line-height: 44px;
            border: 1px solid transparent;
            margin: 0 -1px -1px;
        }
        .sub-pre-menu-inner {
            display: block;
            border-top: 1px solid #e7e7eb;
            width: auto;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
            cursor: pointer;
        }
    </style>
</head>
<body>
{include file='public/header'/}
<!------------------导航-------------------------->
<section id="content">
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content">
        <!--路径导航-->
        <ol class="breadcrumb">
            <li>当前位置是&nbsp;:</li>
            <li>
                <a href="javascript:;">微信管理</a>
            </li>
            <li class="active">自定义菜单</li>
        </ol>
        <!--创建会员卡主要内容-->
        <div class="card-content clearfix">
            <div class="pull-left card-left">
                <div class="cardL-body">
                    <div class="cardL-title" style="background: #000 url(/assets/merchant/image/APPtop.png) no-repeat center top;"></div>
                    <span class="activityTitle title"></span>
                    <div class="mobile_bd">
                        <ul class="designer-x  pre-menu-list ui-sortable" id="menuList" data-num="0">
                            <li class=" pre-menu-item subtable" >
                                <input type="hidden" data-role="parent" data-hash="object:139">
                                <a href="javascript:void(0);" class="pre-menu-link ng-binding" onclick="addbut(this);" data-counts="1">
                                    <i class="icon14-menu-add"></i>
                                    菜单名称
                                </a>
                                <!--<div class="sub-pre-menu-box">-->
                                <!--<ul class="sub-pre-menu-list sub-designer-y">-->
                                <!--<li class="sub-js-not-sortable ng-scope">-->
                                <!--<i class="glyphicon glyphicon-plus">-->
                                <!--</i>-->
                                <!--</li>-->
                                <!--</ul>-->
                                <!--</div>-->
                            </li>
                            <!--<li class="js-sortable pre-menu-item ng-scope" id="sub-1">-->
                            <!--<input type="hidden" data-role="parent" >-->
                            <!--<a href="javascript:void(0);" class="pre-menu-link ng-binding" >-->
                            <!--<i class="icon-menu-dot ng-hide"></i>-->
                            <!--菜单名称-->
                            <!--</a>-->
                            <!--<div class="sub-pre-menu-box">-->
                            <!--<ul class="sub-pre-menu-list sub-designer-y">-->
                            <!--<li class="sub-js-not-sortable ng-scope">-->
                            <!--<i class="glyphicon glyphicon-plus">-->
                            <!--</i>-->
                            <!--</li>-->
                            <!--</ul>-->
                            <!--</div>-->
                            <!--</li>-->
                            <!--<li class="js-sortable pre-menu-item ng-scope" id="sub-2">-->
                            <!--<input type="hidden" data-role="parent" >-->
                            <!--<a href="javascript:void(0);" class="pre-menu-link ng-binding" >-->
                            <!--<i class="icon-menu-dot ng-hide"></i>-->
                            <!--菜单名称-->
                            <!--</a>-->
                            <!--<div class="sub-pre-menu-box">-->
                            <!--<ul class="sub-pre-menu-list sub-designer-y">-->
                            <!--<li class="sub-js-not-sortable ng-scope">-->
                            <!--<i class="glyphicon glyphicon-plus">-->
                            <!--</i>-->
                            <!--</li>-->
                            <!--</ul>-->
                            <!--</div>-->
                            <!--</li>-->
                        </ul>
                    </div>

                </div>
            </div>



        </div>
        <div class="cardR-right">
            <div class="portable-editor to-left" style="margin-top: 15px;">
                <div class="menu-form-hd" style="width: 100%;">
                    <!-- TAB导航 -->
                    <span class="pull-left font-defalut">当前菜单</span>
                    <div class="text-right">
                        <a href="javascript:void(0);" class="color-default" onclick="">删除菜单</a>
                    </div>
                    <div style="display: none;" class="we7-padding-top color-gray">已添加子菜单，仅可设置菜单名称。</div>
                </div>
                <!-- Tab 内容 -->

                <div class="we7-form we7-padding-top">
                    <div class="form-group">
                        <label for class="control-label col-sm-2">菜单名称</label>
                        <div class="form-controls col-sm-8">
                            <div class="input-group">
                                <input type="text" name="title" oninput="binding('title','')" class="form-control ng-pristine ng-valid ng-not-empty ng-touched" placeholder id="title">
                            </div>
                            <span class="help-block">字数不超过4个汉字或8个字母</span>

                        </div>
                        <div style="clear:both;"></div>
                    </div>
                    <div class="form-group">
                        <label for class="control-label col-sm-2">菜单内容</label>
                        <div class="form-controls col-sm-10">

                            <input id="radio-1" type="radio" name="ipt"   value="click"  class="ng-pristine ng-untouched ng-valid ng-not-empty" >
                            <label for="radio-1">
                                跳转网页
                            </label>
                            <input id="radio-2" type="radio" name="ipt"   value="click"  class="ng-pristine ng-untouched ng-valid ng-not-empty" >
                            <label for="radio-1">
                                点击事件
                            </label>
                        </div>

                        <div style="clear:both;"></div>
                    </div>
                    <div class="menu-content">
                        <div class="form-group">
                            <p class="color-gray" style>订阅者点击该子菜单会跳转到以下链接</p>
                            <label for class="control-label col-sm-2"  style>页面地址</label>
                            <div class="form-controls col-sm-8"  style>
                                <input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-empty" id="ipt-url" >
                                <span class="help-block">指定点击此菜单时要跳转的链接（注：链接需加http://）</span>
                            </div>
                        </div>
                        <div style="clear:both;"></div>
                    </div>

                </div>

            </div>

        </div>
        <div style="clear:both;"></div>
        <div class="panel-footer">
            <button type="button"  id="creatcards-btn" class="btn btn-success">发      布</button>
            <button type="button"  id="creatcards-btn" class="btn btn-success">预      览</button>
        </div>
        {include file='public/footer'/}
    </div>


    <!--获取门店列表-->
    <!-- Modal -->

    </div>
</section>
<script>
    //数据绑定
    function binding(id,name){
        var val = $("#"+id).val();
        if(val==""){
            val=name
        }
        $("."+id).text(val)
    }
</script>
<script>
    function addbut(odj){

        var num=$("#menuList").attr("data-num");

        if ($(".subtable").length < 4) {

            var nums=parseInt(num)+1;
            $("#menuList").attr("data-num",nums);
            html = '  <li class="js-sortable pre-menu-item subtable active" id="sub-' + nums + '" data-num="0">\n' +
                '                                <input type="hidden" data-role="parent" >\n' +
                '                                <a href="javascript:void(0);" class="js-pre-menu-link pre-menu-link ng-binding" >\n' +
                '                                    <i class="ng-hide"></i>\n' +
                '                                    菜单名称\n' +
                '                                </a>\n' +
                '                                <div class="sub-pre-menu-box">\n' +
                '                                    <ul class="sub-pre-menu-list sub-designer-y">\n' +
                '                                        <li class="sub-js-not-sortable ng-scope" onclick="addsub(this,'+ nums +');">\n' +
                '                                            <i class="glyphicon glyphicon-plus">\n' +
                '                                            </i>\n' +
                '                                        </li>\n' +
                '                                    </ul>\n' +
                '                                </div>\n' +
                '                            </li>';
            $("#menuList").prepend(html)

            if ($(".subtable").length == 4) {
                $(odj).parent('li').remove();
            }
            $("#sub-"+ nums).siblings("li").removeClass("active");
            console.log(nums);
        }

    }
</script>

<script>
    function addsub(odj,nu){
        var num=$("#sub-"+nu).attr("data-num");

        $("#sub-"+nu).siblings().removeClass("active")
        $("#sub-"+nu).find("i.ng-hide").addClass("icon-menu-dot")
        if ($(odj).parent("ul").find("li").length < 6) {

            var nums=parseInt(num)+1;

            $("#sub-"+nu).attr("data-num",nums);
            html = '  <li class="sub-js-sortable ng-scope" id="scai-' + nums + '">\n' +
                '   <input type="hidden" data-role="parent" >\n' +
                ' <span class="sub-pre-menu-inner" ng-click="context.editBut(subBut, but, 1);">\n' +
                '               <span class="ng-binding">子菜单名称</span>\n' +
                '               </span>'
            '                            </li>';
            $(odj).before(html)
            // console.log($(odj));
            if ($(odj).parent("ul").find("li").length == 6) {
                $(odj).remove();
            }
        }

    }
</script>
<script>
    $(document).on("click",".js-pre-menu-link",function(event){
        //console.log(89);
        $(this).parent("li").addClass("active").siblings().removeClass("active");
        $(".sub-js-sortable").removeClass("active");
        var tid=$(this).parent("li").attr("id");
        console.log(11,tid)
        //value1 = 1;
    });
    $(document).on("click",".sub-js-sortable",function(event){
        // console.log(89);

        $("#menuList").find("li.js-sortable").removeClass("active")
        $(this).parent().parent().parent().siblings().find("li.sub-js-sortable").removeClass("active")
        $(this).addClass("active").siblings().removeClass("active")
        console.log(11,$(this))
    });
    // $(function(){
    //     $('.js-sortable').bind('click',function(){
    //         console.log(89);
    //         $(this).addClass("active").siblings().removeClass("active")
    //     });
    // })

</script>
</body>

</html>
